<template>
	<view class="intro-body">
		<view class="section-title">
			<text>商家介绍</text>
		</view>
		<view class="noData" v-if="!introData && !businessLicense">
			暂无商家介绍信息
		</view>
		<view class="intro-content">
			<view :class="['intro-text', {'expanded': isExpanded, 'truncated': !isExpanded && hasOverflow}]"
				id="intro-text">
				{{introData.hotelDesc || ''}}
			</view>
			
			<view class="expand-btn" v-if="hasOverflow" @tap="toggleExpand">
				{{isExpanded ? '收起' : '展开全部'}}
			</view>
		</view>
		<view class="intro-box">
			<view class="intro-box-item" v-if="introData && introData.envImages && introData.envImages.length > 0">
				<view class="item-title">
					酒店环境
				</view>
				<view :class="['img-list',{'flex':introData.envColumns != 1}]">
					<view class="img-item" v-for="(item,index) in introData.envImages" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.envColumns == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.roomImages && introData.roomImages.length > 0">
				<view class="item-title">
					酒店房间
				</view>
				<view :class="['img-list',{'flex':introData.roomColumns != 1}]">
					<view class="img-item" v-for="(item,index) in introData.roomImages" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.roomColumns == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.tags.length > 0">
				<view class="item-title">
					{{introData.hotelName || ''}}
				</view>
				<view class="tags-list">
					<view class="tags-item" v-for="(item,index) in introData.tags" :key="index">
						{{item || ''}}
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.tags.length > 0">
				<view class="item-title">
					设施服务
				</view>
				<view class="facilities-list">
					<view class="facilities-item" v-for="(fItem,fIndex) in introData.facilityGroups" :key="fIndex">
						<view class="f-title">
							<image class="f-title-icon" :src="fItem.iconImg" mode="widthFix"></image>
							<view class="f-title-name">
								{{fItem.title || ''}}
							</view>
						</view>
						<view class="f-content">
							<view class="f-content-item" :class="{w100:fItem.items && fItem.items.length == 1}" v-for="(item,index) in fItem.items" :key="index">
								{{item || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.tags.length > 0">
				<view class="item-title">
					酒店政策
				</view>
				<view class="policy-list">
					<view class="policy-item" v-for="(pItem,pIndex) in introData.policies" :key="pIndex">
						<view class="p-title">
							<image class="p-title-icon" :src="pItem.iconImg" mode="widthFix"></image>
							<view class="p-title-name">
								{{pItem.title}}
							</view>
						</view>
						<view class="p-content">
							<view class="p-content-item" v-for="(item,index) in pItem.items" :key="index">
								{{item.title}}{{item.title && item.desc ? '：' : ''}}<text class="p-content-item-desc"
									v-if="item.desc">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="businessLicense" v-if="businessLicense" @click="goBusinessLicense">
			商家资质
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isExpanded: false,
				hasOverflow: false
			}
		},
		props: ['introData', 'businessLicense'],
		methods: {
			goBusinessLicense() {
				uni.navigateTo({
					url: "/mall_subpages/merchants/businessLicense?businessLicense=" + this.businessLicense
				})
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			checkOverflow() {
				// 使用uni-app的API获取元素高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#intro-text').boundingClientRect(data => {
					if (data) {
						// 计算5行文字的理论高度（每行42rpx，5行约210rpx）
						const lineHeight = 42;
						const maxLines = 5;
						const maxHeight = lineHeight * maxLines;

						// 如果内容高度大于5行的高度，则显示展开按钮
						this.hasOverflow = data.height > maxHeight;
					}
				}).exec();
			}
		},
		mounted() {
			// 延迟检测，确保DOM完全渲染
			this.$nextTick(() => {
				setTimeout(() => {
					this.checkOverflow();
				}, 100);
			});
		},
		watch: {
			introData: {
				handler() {
					this.$nextTick(() => {
						// 延迟检测，确保DOM完全渲染
						setTimeout(() => {
							this.checkOverflow();
						}, 100);
					});
				},
				deep: true
			}
		}
	}
</script>

<style lang="less">
	@import './intro.less';

	.intro-content {
		.intro-text {
			line-height: 42rpx;

			// 只有在检测完成后且需要截断时才应用截断样式
			&.truncated {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 5;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&.expanded {
				-webkit-line-clamp: unset;
			}
		}

		.expand-btn {
			color: #007AFF;
			font-size: 28rpx;
			// margin-top: 20rpx;
			text-align: left;
			padding: 10rpx 0;
		}
	}
</style>